نوشته های سایه دار توسط CSS






درست کردن سایه توسط نرم افزارهای گرافیکی مانند فتوشاپ یا فایروورکس کار ساده ای میباشد و احتمالا اکثر شما طریقه انجام این کار رو بلد هستید . اما نکته اینه که تا جایی که امکانش هست از حجم صفحات بکاهیم.
در این خود آموز روش انداختی سایه برای متون و توسط کدهای CSS رو آموزش خواهیم داد .
ابتدا از این آدرس نتیجه کار رو مشاهده کنید تا دقیقا بدونید که قرار است چه کاری انجام دهیم : Demo
کاری که در حقیقت انجام میدهیم این است که توسط آدرس دهی مطلق (absolute) 2 متن که اولی نقش نوشته اصلی و دومی نقشه سایه را برعهده خواهند گرفت با فاصله ۲px از همدیگر قرار میدهیم .به کد زیر که در صفحه html ما نوشته خواهد شد دقت کنید :
1. <div id=“shadow”>
2. <span class=“firstlayer”>Text with shadow using CSS</span>
3. <span class=“secondlayer”>Text with shadow using CSS</span>
4. </div>
همانطور که مشاهده میکنید یک متن ۲ بار و در قالب ۲ کلاس مختلف و تحت آیدی shadow نوشته شده اند و هیچگونه عمل خاص دیگری بر روی متونمان انجام نداده ایم .کار اصلی ما بر روی CSS انجام خواهد پدیرفت .
کاری که انجام میدهیم این است که به تگ text container(#shadow) آدرس دهی نسبی نسبت میدهیم اینکار باعث خواهد شد تمامی المانهایی که در داخل تگ #shadow استفاده خواهند شد توسط آدرس دهی مطلق وابسته به تگ #shadow بشوند نه به تگ body
در مرحله بعد به کلاسهای firstlayer و secondlayer موقعیت دهی مطلق میکنیم با این تفاوت که secondlayer به مقدار ۲px پایینتر و به راست بیاید .
و در آخر احتیاج داریم که مشخص اولویت کدام لایه بالاتر است که برروی دیگری قرار بگیرد .این کار توسط دستور z-index انجام پذیر است .با هم نگاهی به سورس میاندازیم :
  1. html, body { margin: 0px; padding: 0px; }
  2. body {
  3. background-color: #DDDFD7;
  4. font-family: Tahoma;
  5. font-size: 11px;
  6. text-align: center;
  7. }
  8. #shadow{
  9. width: 500px;
  10. height: 200px;
  11. margin: 20px auto 20px auto;
  12. padding: 0px;
  13. text-align: left;
  14. position: relative;
  15. border: solid 1px #fff;
  16. }
  17. .firstlayer {
  18. font-size: 18px;
  19. font-weight: bold;
  20. color: #fff;
  21. position: absolute;
  22. top: 20px;
  23. left: 20px;
  24. z-index: 1;
  25. }
  26. .secondlayer {
  27. font-size: 18px;
  28. font-weight: bold;
  29. color: #aaa;
  30. position: absolute;
  31. top: 22px;
  32. left: 22px;
  33. z-index: 0;
  34. }
نکته بسیار مهم : سعی بر این داشته باشید که همیشه فایلهای CSS شما به صورت External به صفحات شما متصل شود،اینکار باعث میشود در حجمهای بالا صفحات سایت شما سریعتر لود شوند.
/خ